/*
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2022-11-15 16:27:21
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2022-11-15 17:49:54
 * @FilePath: /vue3-datav/src/components/ui/OlMap/mixin/markers.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import { Feature } from 'ol';
import { Point } from 'ol/geom';

import { createMarkerStyleFn } from '../utils/index';

const tapMarker = function(e) {
    if (!this) throw '请绑定this到事件';
    const pixel = this.map.getEventPixel(e.originalEvent);
    let targetFeature;
    this.map.forEachFeatureAtPixel(pixel, (feature) => {
        if (!targetFeature) {
            targetFeature = feature;
        }
    });
    if (!targetFeature) return;
    const targetType = targetFeature.getProperties().name;
    // 点中标记点
    if (targetType === 'marker') {
        const data = this.markersData[targetFeature.getProperties().index];
        // this.openInfo(data);
        this.$emit('tapMarker', { event: e, data, targetType });
    }
};
export default {
    data() {
        return {
            markersLayer: null, // 图钉图层
            blinkList: [] // 闪烁点列表
        };
    },
    watch: {
        markersData: {
            handler() {
                this.$nextTick(() => {
                    this.addMarkers();
                });
            },
            deep: true,
            immediate: true
        }
    },
    created() {
        this.eventCallbackMap['click'].push(tapMarker.bind(this));
    },
    methods: {
        /*
         *标注点
         */
        addMarkers() {
            if (this.infoOverlayNsp.layer) {
                this.infoOverlayNsp.layer.setPosition();
            }
            this.blinkList = [];
            // const source = this.markersLayer.getSource();
            // source.clear();
            // 只是清理source无法清除渲染上下文，只能删除图层重新添加
            this.map.removeLayer(this.markersLayer);
            this.markersLayer = new VectorLayer({
                zIndex: 10,
                source: new VectorSource({
                    features: []
                })
            });
            this.map.addLayer(this.markersLayer);
            this.markersData.forEach((data, index) => {
                const markerFeature = new Feature({
                    geometry: new Point([data.lng, data.lat]),
                    name: 'marker',
                    index
                });
                // 将当前要素加入矢量数据源
                this.markersLayer.getSource().addFeature(markerFeature);
                if (!!data.blinkOption || data.isBlink) {
                    this.blinkList.push(markerFeature);
                } else {
                    markerFeature.setStyle(createMarkerStyleFn(data));
                }
            });
            this.markersLayer.on('postrender', (/* evt */) => {
                if (this.blinkList.length > 0) {
                    const source = this.markersLayer.getSource();
                    this.blinkList.forEach((feature) => {
                        source.removeFeature(feature);
                        const { index } = feature.getProperties();
                        const data = this.markersData[index];
                        feature.setStyle(createMarkerStyleFn(data));
                        source.addFeature(feature);
                    });
                    this.map.render();
                }
            });
        }
    }
};
